<template>
  <view>
    <image class="bg" src="../../static/my/bg.png" mode="aspectFill" />
    <image src="../../static/my/sz.png" class="szImage" mode="aspectFill" @click="goPage('/pages/myPage/setting')" />
    <view class="titBox">
      <view class="titleBox">
        <u-avatar :src="userInfo.headUrl" size="80"></u-avatar>

        <view class="info">
          <view class="title">{{ userInfo.nickName || "用户昵称" }} </view>
          <view class="subTitle">账号:{{ userInfo.cell || "" }}</view>
        </view>
      </view>
      <u-icon name="arrow-right" color="#C6C6C6" size="20" @click="goPage('/pages/myPage/userInfo')"></u-icon>
    </view>
    <view class="gnBox">
      <view class="item" @click="goPage('/pages/myPage/myAttention')">
        <view class="num">{{ userInfo?.guanzhu || 0 }}</view>
        <view class="label">我的关注</view>
      </view>
      <view class="item" @click="goPage('/pages/myPage/myCollection')">
        <view class="num">{{ userInfo?.fans || 0 }}</view>
        <view class="label">我的收藏</view>
      </view>
      <view class="item" @click="goPage('/pages/myPage/myUpdates')">
        <view class="num">{{ userInfo?.dongtai || 0 }}</view>
        <view class="label">我的动态</view>
      </view>
      <view class="item" @click="goPage('/pages/myPage/tgDetails')">
        <view class="num">{{ userInfo?.tuiguang || 0 }}</view>
        <view class="label">我的推广</view>
      </view>
    </view>
    <view class="wdqb" @click="goPage('/pages/myPage/openMembership')"> </view>

    <view class="orderBox wddd">
      <CommonTitle title="我的订单" titleFontSize="32rpx" isShow @more-handle="goPage(`/pages/shop/goodsDetails/goodsOrderList?status=null`)" />
      <view class="walletList">
        <view class="item" v-for="(item, index) in myOrderList" :key="index" @click="goPage(`/pages/shop/goodsDetails/goodsOrderList?status=${JSON.stringify(item.value)}`)">
          <image class="icon" :src="item.icon" mode=""></image>
          <view class="name">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="walletList waBox">
      <view class="item" v-for="(item, index) in myFnList" :key="index" @click="goPage(item.url)">
        <image class="icon" :src="item.icon" mode=""></image>
        <view class="name">{{ item.name }}</view>
      </view>
    </view>
    <view class="commonBox" style="margin-top: 20rpx">
      <CommonTitle title="常用工具" />
      <u-cell-group :border="false">
        <u-cell :border="false" title="积分兑换" isLink @click="goPage('/pages/shop/pointsMall')">
          <template #icon><image class="toolIcon" src="../../static/my/jfdh.png" mode="aspectFill" /></template>
        </u-cell>
        <u-cell :border="false" title="积分订单" isLink @click="goPage('/pages/shop/goodsDetails/pointGoodsOrderList')">
          <template #icon><image class="toolIcon" src="../../static/my/jfdd.png" mode="aspectFill" /></template>
        </u-cell>
        <u-cell :border="false" title="会员订单" isLink @click="goPage('/pages/shop/goodsDetails/HYGoodsOrderList')">
          <template #icon><image class="toolIcon" src="../../static/my/hydd.png" mode="aspectFill" /></template>
        </u-cell>
        <u-cell :border="false" title="立即邀请" isLink @click="goPage('/pages/myPage/nowInvite/nowInvite')">
          <template #icon><image class="toolIcon" src="../../static/my/ljyq.png" mode="aspectFill" /></template>
        </u-cell>
        <u-cell :border="false" title="服务预约" isLink @click="goPage('/pages/shop/goodsDetails/serviceReservation')">
          <template #icon><image class="toolIcon" src="../../static/my/fwyy.png" mode="aspectFill" /></template>
        </u-cell>
        <u-cell :border="false" title="我的门店" isLink @click="goPage('/pages/myPage/shopOrder')">
          <template #icon><image class="toolIcon" src="../../static/my/wdmd.png" mode="aspectFill" /></template>
        </u-cell>
        <u-cell :border="false" title="意见反馈" isLink @click="goPage('/pages/myPage/feedback')">
          <template #icon><image class="toolIcon" src="../../static/my/yjfk.png" mode="aspectFill" /></template>
        </u-cell>
        <u-cell :border="false" title="官方客服" isLink>
          <template #icon><image class="toolIcon" src="../../static/my/gfkf.png" mode="aspectFill" /></template>
        </u-cell>
        <view class="lxkf">
          <u-button open-type="contact" bindcontact="handleContact" session-from="sessionFrom"></u-button>
        </view>
        <u-cell :border="false" title="加盟店铺" isLink @click="goPage('/pages/myPage/joinUs')">
          <template #icon><image class="toolIcon" src="../../static/my/jmdp.png" mode="aspectFill" /></template>
        </u-cell>
        <u-cell :border="false" title="名医入驻" isLink @click="goPage('/pages/myPage/doctorEnter')">
          <template #icon><image class="toolIcon" src="../../static/my/myrz.png" mode="aspectFill" /></template>
        </u-cell>
      </u-cell-group>
    </view>
  </view>
</template>

<script setup lang="ts">
import CommonTitle from "@/components/commonTitle.vue";
import { ref } from "vue";
//@ts-ignore
import { onShow } from "@dcloudio/uni-app";
import { goPage } from "../../utils/commonFn";
import { selectUserInfoByUserId } from "@/api/my";
const userInfo = ref<any>({});
const myOrderList = ref([
  {
    icon: "../../static/my/qb.png",
    name: "全部订单",
    value: {
      index: 0,
      value: "",
    },
  },
  {
    icon: "../../static/my/dfk.png",
    name: "待付款",
    value: {
      index: 1,
      value: "WAIT_PAY",
    },
  },
  {
    icon: "../../static/my/dsh.png",
    name: "待收货",
    value: {
      index: 2,
      value: "IN_DISTRIBUTION",
    },
  },
  {
    icon: "../../static/my/tksh.png",
    name: "退款",
    value: {
      index: 3,
      value: "RETURN",
    },
  },
  {
    icon: "../../static/my/ywc.png",
    name: "已完成",
    value: {
      index: 3,
      value: "CONFIRM_RECEIPT",
    },
  },
]);
const myFnList = ref([
  {
    icon: "../../static/my/jf.png",
    name: "积分",
    url: "/pages/myPage/jfDetails",
  },
  {
    icon: "../../static/my/mljj.png",
    name: "美丽基金",
    url: "/pages/myPage/mljjDetails",
  },
  {
    icon: "../../static/my/gwj.png",
    name: "购物金",
    url: "/pages/myPage/gwjDetails",
  },
  {
    icon: "../../static/my/qb1.png",
    url: "/pages/myPage/qbDetails",
    name: "钱包",
  },
]);

onShow(async () => {
  const userId = uni.getStorageSync("userId");
  if (!userId) {
    uni.redirectTo({ url: "/pages/login/login" });
    return;
  }
  const res = await selectUserInfoByUserId({ userId });
  uni.setStorageSync("userInfo", res);
  userInfo.value = res;
});
</script>

<style lang="less" scoped>
.bg {
  height: 228rpx;
  width: 100%;
}
.szImage {
  width: 56rpx;
  height: 56rpx;
  position: absolute;
  right: 30rpx;
  top: 100rpx;
}
.titBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 32rpx;
  padding-right: 32rpx;
  margin-top: -40rpx;
}
.titleBox {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  .info {
    margin-left: 24rpx;
    margin-top: 20rpx;

    .title {
      display: flex;
      align-items: center;
      font-size: 40rpx;
      font-weight: 600;
      color: #000;
    }
    .subTitle {
      font-size: 24rpx;
      color: #8a8a8d;
      margin-top: 16rpx;
    }
  }
}
.gnBox {
  padding-top: 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 60rpx;
  .item {
    text-align: center;
    .num {
      font-size: 40rpx;
      color: #000000;
    }
    .label {
      font-size: 24rpx;
      color: #8a8a8d;
      line-height: 34rpx;
    }
  }
}
.walletList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90rpx, 1fr)); /* 自适应列布局 */
  gap: 10px; /* 子元素之间的间距 */
  margin: 0 auto;
  text-align: center;
  margin-top: 33rpx;
  .num {
    font-size: 38rpx;
    font-weight: 500;
    color: #333333;
    line-height: 62rpx;
  }
  .name {
    font-size: 26rpx;
    color: #333333;
    line-height: 34rpx;
  }
  .icon {
    width: 56rpx;
    height: 56rpx;
  }
}
.orderBox {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 40rpx 32rpx;
  margin-top: 20rpx;

  .walletList {
    width: 100%;
    border-top: 1rpx solid #f7f7f7;
    padding-top: 20rpx;
    .num {
      font-size: 40rpx;
    }
  }
}
.radioBox {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  .text {
    margin-top: 10rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #a6a9af;
    line-height: 34rpx;
    text {
      color: #426efe;
    }
  }
}
.wdqb {
  box-sizing: border-box;
  margin: 0 auto;
  width: 90%;
  height: 142rpx;
  background: url("../../static/my/wdzh.png") no-repeat center;
  background-size: 100% 100%;
  display: flex;
  position: relative;
  z-index: 1;
}
.wddd {
  margin-top: -25rpx;
  padding-top: 50rpx;
}
button {
  background: none;
  padding-left: 6px;
  padding-right: 6px;
}
button:after {
  content: none;
}
/deep/ .u-cell__body {
  width: 100%;
  padding: 25rpx 0px !important;
}
.toolIcon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 30rpx !important;
}
.lxkf {
  /deep/.u-reset-button {
    border: none !important;
    position: absolute !important;
    left: 0;
    bottom: 98px;
    background: rgba(0, 0, 0, 0) !important;
  }
}
.waBox {
  background: #fff;
  padding: 34rpx 0;
  border-radius: 16rpx;
}
</style>
